<template>
  <div class="star" :class="starsize">
    <span class="star-item" v-for="(item,index) in ratingStarNumber" :key="index" :class="item"></span>
  </div>
</template>

<script>
export default {
    name:"star",
    props:["starsize","ratingScore"],
    data(){
       return{
  
       }
    },
    mounted(){
      // console.log(this.ratingStarNumber);
       
    },
    computed:{
         ratingStarNumber(){
             let arr=[];
             let on = 0;
             let half = 0;
             let off = 0;
            //取出整数
           on=Math.floor(this.ratingScore);
      
           for(let i= 0 ; i < on;i++)
           {
          
            arr.push("on");
           }
          //  取出大于等于5的值
          if(this.ratingScore*10 - on*10 >=5){
            half=1
            arr.push("half");
          }else{
            half=0;
          }
          off=5 - on -half;
          for(let i= 0 ; i < off;i++)
           {
            arr.push("off");
           }
          return arr;
       
       }
    }
};
</script>

<style>
 .star {
  float: left;
  font-size: 0;
}
 .star .star-item {
  display: inline-block;
  background-repeat: no-repeat;
}
 .star.star-48 .star-item {
  width: 20px;
  height: 20px;
  margin-right: 22px;
  background-size: 20px 20px;
}
 .star.star-48 .star-item:last-child {
  margin-right: 0;
}
 .star.star-48 .star-item.on {
  background-image: url("./images/stars/star48_on@2x.png");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .star.star-48 .star-item.on {
    background-image: url("./images/stars/star48_on@3x.png");
  }
}
 .star.star-48 .star-item.half {
  background-image: url("./images/stars/star48_half@2x.png");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .star.star-48 .star-item.half {
    background-image: url("./images/stars/star48_half@3x.png");
  }
}
 .star.star-48 .star-item.off {
  background-image: url("./images/stars/star48_off@2x.png");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .star.star-48 .star-item.off {
    background-image: url("./images/stars/star48_off@3x.png");
  }
}
 .star.star-36 .star-item {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  background-size: 15px 15px;
}
 .star.star-36 .star-item:last-child {
  margin-right: 0;
}
 .star.star-36 .star-item.on {
  background-image: url("./images/stars/star36_on@2x.png");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .star.star-36 .star-item.on {
    background-image: url("./images/stars/star36_on@3x.png");
  }
}
 .star.star-36 .star-item.half {
  background-image: url("./images/stars/star36_half@2x.png");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .star.star-36 .star-item.half {
    background-image: url("./images/stars/star36_half@3x.png");
  }
}
 .star.star-36 .star-item.off {
  background-image: url("./images/stars/star36_off@2x.png");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .star.star-36 .star-item.off {
    background-image: url("./images/stars/star36_off@3x.png");
  }
}
 .star.star-24 .star-item {
  width: 10px;
  height: 10px;
  margin-right: 3px;
  background-size: 10px 10px;
}
 .star.star-24 .star-item:last-child {
  margin-right: 0;
}
 .star.star-24 .star-item.on {
  background-image: url("./images/stars/star24_on@2x.png");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .star.star-24 .star-item.on {
    background-image: url("./images/stars/star24_on@3x.png");
  }
}
 .star.star-24 .star-item.half {
  background-image: url("./images/stars/star24_half@2x.png");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .star.star-24 .star-item.half {
    background-image: url("./images/stars/star24_half@3x.png");
  }
}
 .star.star-24 .star-item.off {
  background-image: url("./images/stars/star24_off@2x.png");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .star.star-24 .star-item.off {
    background-image: url("./images/stars/star24_off@3x.png");
  }
}
</style>